import React from 'react'
import { connect } from 'dva'
import { Row, Col } from 'antd'
import DefinitionList from '../../../components/DefinitionList'

/**
 * [StockQuota 股票指标]
 */
class StockQuota extends React.Component {
  state = {
    data: this.props.stockQuota
  }
  componentDidMount(){
    this.fetchData(this.props)
  }
  componentWillReceiveProps(nextProps) {
    console.log('stockQuota>cwr',nextProps,this.props)
    if ((nextProps.begindate !== this.props.begindate) || (nextProps.enddate !== this.props.enddate) || (nextProps.trader !== this.props.trader) ||(nextProps.stock !== this.props.stock)) {
      this.fetchData(nextProps)
    }
    if (nextProps.stockQuota !== this.props.stockQuota) {
      this.setState({
        data: nextProps.stockQuota
      })
    }
  }
  fetchData = (props) => {
    console.log('stockQuota>fetchData',props)
    this.props.dispatch({
      type: `dailyReplay/getStockQuota`,
      payload:props
    })
  }


  render() {
    const { fieldList = [], symbol = {} } = this.state.data
    const theFieldList = (this.props.trader === 'total') ? fieldList.filter(item => item.id !== 'trader') : fieldList
    console.log('stockQuota>theFieldList',theFieldList,this.state.data)
    return (
      <Row className='traderQuota'>
        {
          symbol !== null?<div>
            {
              theFieldList.map((item, index) => (
                <Col key={index} xs={12} sm={8} md={6} lg={6} xl={6}>
                  <DefinitionList name={`${item.name}:`} value={symbol[item.id]} />
                </Col>
              ))
            }
          </div>:<div>该只股票暂无交易记录</div>
        }
        
      </Row>
    )
  }
}
StockQuota.defaultProps = {
  begindate: null,
  enddate: null,
  trader: 'total',
  stockQuota: {
    fieldList: [], symbol: []
  }
}

export default connect()(StockQuota)
